<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link  rel="stylesheet" href="css/personalCenter.css">
    <link  rel="stylesheet" href="css/font-awesome.css">
    <link  rel="stylesheet" href="css/bootstrap.css">
    <link  rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<style>
    body{
        background-color:#5bc0de;
    }
    .msg_box{
        z-index: 10096;
        position: relative;
        left: 50%;
        top: 30%;
        margin-left: -1.25rem;
        margin-top: -0.9rem;
        width: 2.5rem;
        height: 1.8rem;
        background-color: white;
        border-radius: 3%;
        overflow: hidden;
    }
    .msg_box .msg_head{
        background-color: #fc5459;
        width: 100%;
        height: 0.3rem;
        text-align: center;
        line-height: 0.3rem;
        font-size: 0.14rem;
        color: white;
    }
    .msg_box .msg_content{
        border-radius: 3%;
        margin: 0.1rem auto 0;
        width:90%;
        height: 1rem;
        background-color: #fff;
        text-align: center;
        line-height:1rem ;
        font-size: 0.15rem;
    }    .msg_box .msg_content i{
                 color: #fc5459;
                 font-size: 0.2rem;
    }

    .msg_box .msg_footer{
        text-align: center;
        font-size: 0.14rem;
        margin: 0.05rem auto;
        width: 1rem;
        height: 0.3rem;
        line-height: 0.3rem;
        border-radius: 0.3rem;
        color: white;
        background-color: #fc5459;
        /*border: 1px solid #fc5459;*/


    }
    .msg_box .msg_footer span{
     display: block;
    }
</style>
<body >
<div id="xxx" style="font-size: 0.16rem; background-color:#fff;display: inline-block ">显示</div>
   <div class="msg_box">
       <div class="msg_head">提示</div>
       <div class="msg_content">
           <i class="fa fa-check-square" aria-hidden="true"></i>
           操作成功</div>
       <div class="msg_footer">
          <span>确认 <i>(5)</i></span>
       </div>
   </div>
<script>
    // 入口函数
    $(function () {
        // 创建一个提示框函数
        function msg() {
            let msg_box = $(".msg_box");
            let $num = $(" .msg_footer span i");// 页面上的i的默认状态
            let timeNum = 5; // 定义一个倒计时
            let timer; //定义定时器
            msg_box.hide();//初始化隐藏

            $("#xxx").click(function () { // 按钮注册点击事件
                msg_box.show();//显示盒子
                timer= setInterval(function () {
                    console.log($num.text());
                },1000)
            })
        }

        msg();
    })
</script>
</body>
</html>